<template>
  <div class="save-dialog">
    <el-dialog :title="title" :visible.sync="saveDialogShow" @open="open" @close="close">
      <el-form label-width="85px">
        <el-form-item label="column1：" class="is-required">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="column2：" class="is-required">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <footer slot="footer" class="btn-group">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close" 取消</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'saveDialog',
  props: {
    id: String,
    type: {
      type: String,
      default: 'add'
    },
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      saveDialogShow: false
    }
  },
  computed: {
    title() {
      if (this.type === 'edit') {
        return '编辑'
      } else {
        return '新增'
      }
    },
  },
  watch: {
    dialogShow() {
      this.saveDialogShow = this.dialogShow;
    }
  },
  methods: {
    open() {
      if (this.type === 'edit') {
        //编辑时, 做些什么呢
      }
    },
    close() {
      this.$emit('update:dialogShow', false);
    },
    save() {
      const loadingIns = this.$loading({
        text: '正在保存',
        target: '#app'
      });
      setTimeout(() => {
        this.$message.success({ message: '保存成功', showClose: true });
        this.$emit('success');
        this.close();
        loadingIns.close();
      }, 2000);
    }
  }
}
</script>

<style>
@import "./index.less";
</style>
